<template>
  <div class="mt-10 ml-10 mr-10"> 
    <el-card>
      <div class="flex aic f16">
        <p>
          <span class="bs">计费 / </span>
          <span class="jia">使用记录</span>
          <span class="f14"> - 统计当前账户每天消耗的消息额度总数，可查看历史月份的使用记录。</span>
        </p>
      </div>
  </el-card>
  </div>
  <div class="mt-10  ml-10 mr-10">
    <el-card class="box-card">
    <template #header>
       <Search ref="changeMonth" />
    </template>
  <el-table :data="usegeData" stripe border style="width: 100%">
    <el-table-column align="center" type="index" label="序号" width="80" />
    <el-table-column align="center" prop="id" label="充值id" />
    <el-table-column align="center" prop="cTime" label="日期" :formatter="utils.fcTimeNo" />
    <el-table-column align="center" prop="amount" label="充值金额" />
    <el-table-column align="center" prop="desc" label="备注"  />
  </el-table>
  <div class="flex jc-c mt-20">
     <el-pagination background page-size="pageSize" :current-page="currPage" @current-change="changePage" layout="prev, pager, next,jumper" :hide-on-single-page="value" :total="total" />
  </div>
  </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref,inject } from "vue"
import Search from './recharge/Search.vue'
import * as api from '@/api/index';
//根组件提供utils对象
const utils = inject('utils');
const usegeData = ref([])
//日期
const dateValue = ref('')
//分页
let currPage = ref(1);
let pageSize = ref(10);
let total = ref(0);
const changePage = (newPage)=>{
 currPage.value = newPage
 getFeelList();
}
//列表请求
const getFeelList = ()=>{
  let data={
    currPage: currPage.value,
    pageSize: pageSize.value
  }
    api.$feeRechargeList(data).then(res=>{
      console.log(res)
      usegeData.value = res.data
      total.value = res.total
    })
}
onMounted(getFeelList);
</script>

<style lang="less">
.search{
    p{
        margin-right: 10px;
    }
    button{
        border: none;
        border-radius: 3px;
        padding: 5px 10px;
    }
}
</style>